<template>
  <div class="list">
    <scroll class="content" ref="scroll">

      <!-- 如果购物车里面没有商品，就显示一张购物车为空的图片 -->
      <div class="header-center" v-show="length == 0">
      <div class="img-container">
        <img src="~assets/images/cart/购物车@2x.png" alt="" />
      </div>
    </div>

     <!-- 如果购物车里面有商品，就遍历渲染 -->
    <div class="shop-list-container" v-show="length">
      <!-- 购物车中的每一项 -->
      <div class="shop-item" v-for="(item, index) in cartList" :key="index">
        <!-- 购物车中的每一项的头部 -->
        <div class="top border-bottom">
          <p class="btn" @click="isCheck(index)" v-show="!item.checked"><img src="~assets/images/cart/椭圆1拷贝3@2x.png" alt="" /></p>
          <p class="btn" @click="isCheck(index)" v-show="item.checked"><img src="~assets/images/cart/选中@2x.png" alt="" /></p> 
          <p class="title">家具 Design</p>
        </div>
        <!-- 购物车中的每一项的底部 -->
        <div class="bottom">
          <!-- 购物车中的每一项的底部的左边 -->
          <div class="left">
            <p class="btn"  @click="isCheck(index)" v-show="!item.checked"><img src="~assets/images/cart/椭圆1拷贝3@2x.png" alt="" /></p>
            <p class="btn"  @click="isCheck(index)" v-show="item.checked"><img src="~assets/images/cart/选中@2x.png" alt="" /></p>
          </div>
          <!-- 购物车中的每一项的底部的中间 -->
          <div class="center">
            <img src="~assets/images/cart/图层51拷贝@2x.png" alt="" />
          </div>

          <!-- 购物车中的每一项的底部的右边 -->
          <div class="right" v-show="rightShow" >
            <p class="name">{{ item.goods_name }}</p>
            <p class="format">400x400x560cm; 黑胡桃木</p>
            <p class="color">胡桃木色</p>
            <p class="num">
              <span class="price">¥ {{ item.price }}</span>
              <span class="count">x{{ item.count }}</span>
            </p>
          </div>
          <div class="edit" v-show="!rightShow">
            <div class="reduce" @click="reduce(index)">-</div>
            <div class="count">{{ item.count }}</div>
            <div class="add" @click="add(index)">+</div>
          </div>

        </div>
      </div>
    </div>
    </scroll>
  </div>
</template>

<script>
import { mapGetters,mapState} from "vuex";
import Scroll from 'components/common/scroll/Scroll'

export default {
  name: "ShopCartList",
  components: {
    Scroll
  },
  computed: {
    ...mapGetters({ length: "cartLength", cartList: "cartList" }),
    ...mapState(['rightShow'])
  },
  activated() {
    this.$refs.scroll.refresh()
  },
  methods: {
    /* 商品是否被选中 */
    isCheck (index) {
     this.cartList[index].checked = !this.cartList[index].checked
    },
    /* 点击编辑按钮触发mutations中的reduce减商品的数量 */
    reduce (index) {
      this.$store.commit('reduce',index)
    },
    /* 点击编辑按钮触发mutations中的add加商品的数量 */
    add (index) {
      this.$store.commit('add',index)
    }
  }
};
</script>

<style lang="less" scoped>
.header-center {
  height: 4rem;
  .img-container {
    width: 1.53rem;
    height: 1.255rem;
    margin: 0.83rem 1.225rem 0 0.995rem;
    img {
      width: 100%;
    }
  }
}

.content {
  height: 100%;
  overflow: hidden;
}
.list {
   height: calc(~"100% - .44rem - .49rem");
}

.shop-list-container {
  background: #eee;
  padding-top: 0.09rem;
  height: 100vh;
  .shop-item {
    height: 1.665rem;
    background: #fff;
    margin-bottom: 0.05rem;
    .top {
      display: flex;
      height: 0.4rem;
      align-items: center;
      .title {
        font-size: 0.15rem;
        color: #333;
        margin-left: 0.05rem;
      }
      .btn {
        width: 0.175rem;
        height: 0.175rem;
        line-height: 0.175rem;
        text-align: center;
        margin-left: 0.15rem;
        img {
          width: 100%;
          
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      .left {
        .btn {
          margin-left: .15rem;
          line-height: .175rem;
          text-align: center;
          width: 0.175rem;
          height: 0.175rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .center {
        width: 1rem;
        height: 1rem;
        margin-top: .11rem;
        margin-left: .11rem;
        img {
          display: inline-block;
          width: 1rem;
          height: 1rem;
        }
      }
      .edit {
        margin-left: .4rem;
        display: flex;
        font-size: .14rem;
        color: #666;
        
       .reduce {
         width: .2865rem;
         height: .3rem;
         line-height: .3rem;
         text-align: center;
         border: 1px solid #D9D9D9;
       }
       .count {
         width: .875rem;
         height: .3rem;
         line-height: .3rem;
         text-align: center;
         border: 1px solid #D9D9D9; 
       }
       .add {
         width: .3rem;
         height: .3rem;
         line-height: .3rem;
         text-align: center;
         border: 1px solid #D9D9D9;
       }
      }
      .right {
        margin-top: .2rem;
        margin-left: .145rem;
        .name {
          font-size: .14rem;
          color: #333;
          margin-bottom: .09rem;
        }
        .format,.color{
          font-size: .12rem;
          color: #666;
          margin-bottom: .09rem;
        }
        .num {
          
          display: flex;
          justify-content: space-between;
          .price {
            font-size: .14rem;
            color: #D20A0A;
            min-width: .5rem;
          }
          .count {
            font-size: .14rem;
            color: #333;
            margin-left: 1.35rem;
          }
        }
      }
    }
  }
}
</style>